/**
 * Created by henian.xu on 2017/7/4 0004.
 * 菜单导航
 */
$className: $pf + menu;
$itemHeight: 40px;
.#{$className} {
    //display: inline-block;
    //min-width: 100%;
    list-style: none;
    padding-left: 0;

    // 选项
    &-item {
        //display: inline-block;
        //min-width: 100%;
        &-label {
            //display: inline-block;
            //min-width: 100%;
            display: block;
            height: $itemHeight;
            line-height: $itemHeight;
            padding: 0 $padding;
            user-select: none;
            cursor: pointer;
            > span {
                display: inline-block;
                max-width: 100%;
                @include text-line(1); // white-space: nowrap; 在 display: inline-block 下会出现间隔
            }
            &:hover {
                background-color: mix($color-main, #fff, 10%);
            }
        }
        &.active {
            > .#{$className}-item-label {
                background-color: mix($color-main, #fff, 70%);
                color: #fff;
            }
        }
    }

    // 子菜单
    &-submenu {
        display: none;
        list-style: none;
        padding-left: 0;

        &-label {
            position: relative;
            padding-right: $padding + 10px;
            &:after {
                content: '\f107';
                @include make-icon;
                line-height: inherit;
                display: inline-block;
                position: absolute;
                top: 0;
                right: $padding;
            }
        }
    }

    // .x-menu-submenu-label 展开时图标向上
    &-item.extend {
        > .#{$className}-submenu {
            display: block;

            &-label {
                &:after {
                    content: '\f106';
                }
            }
        }
    }

    // 浮动
    &-nav,
    &-float {
        display: inline-block;
        @include clearfix;
        .#{$className} {
            // 选项
            &-item {
                position: relative;
                // .x-menu-submenu-label 展开时图标向左
                &.extend {
                    > .#{$className}-submenu {
                        display: inline-block;
                        &-label {
                            &:after {
                                content: '\f104';
                            }
                        }
                    }
                }
            }

            // 子菜单
            &-submenu {
                position: absolute;
                top: 0;
                left: 100%;
                border: 1px solid $gray2;

                &-label:after {
                    content: '\f105';
                }

                .#{$className}-item {
                    display: inline-block;
                    min-width: 100%;
                    &-label {
                        display: inline-block;
                        min-width: 100%;
                        > span {
                            max-width: inherit;
                            min-width: 100%;
                            overflow: visible;
                        }
                    }
                }
            }
        }
    }

    // 导航
    &-nav {
        display: block;
        > .#{$className} {
            &-item {
                float: left;
                > .#{$className}-submenu {
                    top: 100%;
                    left: 0;
                    &-label:after {
                        display: none;
                    }
                }
            }
        }
    }
}


